<template>
  <div class="container">
    <div>
      <div class="cropResImageDiv">
        <img
          src="cropResImage"
          ref="cropResImage"
          alt="剪切结果"
          v-show="croppable"
          style=""
        />
      </div>
      <img
        ref="cropperImage"
        src="https://tplentiful.bio/static/avatar/admin/avatar.png"
        alt="Picture"
        class="cropper-hidden"
      />
      <div ref="result"></div>
      <div class="cropper-container cropper-bg crop-canvas" touch-action="none">
        <div class="cropper-wrap-box">
          <div
            class="cropper-canvas"
            style="width: 640px; height: 360px; transform: translateY(1.5px)"
          >
            <img
              src="https://tplentiful.bio/static/avatar/admin/avatar.png"
              alt="Picture"
              class="cropper-hide"
              style="width: 640px; height: 360px; transform: none"
            />
          </div>
        </div>
        <div
          class="cropper-drag-box cropper-crop cropper-modal"
          data-cropper-action="crop"
          ref="cropBox"
        ></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick, getCurrentInstance, onMounted } from "vue";
import Cropper from "cropperjs";
let cropper: any = ref();
let croppable = ref(false);
const cropperImage: any = ref();
const cropButton = ref(null);
const result: any = ref(null);
const cropResImage: any = ref(null);
const cropBox: any = ref(null);
let { proxy }: any = getCurrentInstance();
onMounted(() => {});
defineExpose({
  uploadImage(url: string) {
    uploadImage(url);
  },
});
nextTick(() => {
  cropper = new Cropper(cropperImage.value, {
    aspectRatio: 1,
    ready: function () {
      croppable.value = true;
      croped();
    },
    cropstart: (e) => {
      console.log("开始了");
    },
    cropmove: () => {
      console.log("正在移动");
    },
    cropend: () => {
      croped();
    },
  });
});

function croped() {
  let croppedCanvas;
  let roundedCanvas;
  if (!croppable) {
    return;
  }
  croppedCanvas = cropper.getCroppedCanvas();
  roundedCanvas = getRoundedCanvas(croppedCanvas);
  cropResImage.value.src = roundedCanvas.toDataURL();
}

const uploadImage = (url: string) => {
  proxy
    .upload(url)
    .then((res: any) => {
      
    })
    .catch((err: any) => {});
};

function getRoundedCanvas(sourceCanvas: any) {
  const canvas = document.createElement("canvas");
  let context: any = canvas.getContext("2d");
  let width = sourceCanvas.width;
  let height = sourceCanvas.height;
  canvas.width = width;
  canvas.height = height;
  context.imageSmoothingEnabled = true;
  context.drawImage(sourceCanvas, 0, 0, width, height);
  context.globalCompositeOperation = "destination-in";
  context.beginPath();
  context.arc(
    width / 2,
    height / 2,
    Math.min(width, height) / 2,
    0,
    2 * Math.PI,
    true
  );
  context.fill();
  return canvas;
}
</script>

<style  lang="scss">
@import "cropperjs/dist/cropper.min.css";
.container {
  margin: 20px auto;
  width: 60%;
  height: 50%;
  img {
    width: 40%;
  }
  .cropResImageDiv {
    margin: auto;
    img {
      margin-left: 25%;
    }
  }
}

.cropper-view-box,
.cropper-face {
  border-radius: 50%;
}
</style>